import React from 'react';
import {Col, Row} from 'antd';
import ThemeItem from './Item';
import { WeaSelect, WeaLocaleProvider } from 'ecCom';
import classNames from 'classnames';
import ColorPicker from 'rc-color-picker';
import {alignOpts, fontFamilyOpts, fontSizeOpts} from "../../../../../../constants/theme";
const getLabel = WeaLocaleProvider.getLabel;

const scope = 'title.css';

export default class ThemeTitleSetting extends React.Component {
  formatFW = () => {
    const { fontWeight } = this.props.data.css;

    if ('bold' === fontWeight) return 'normal';

    return 'bold';
  }

  render() {
    const { data, onChange } = this.props;
    const { fontFamily, fontSize, fontWeight, color, textAlign } = data.css;
    const bold = 'bold' === fontWeight;

    return (
      <div>
        <h4>{getLabel('511828','表单标题')}</h4>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@chhhbo`} label={getLabel('511805','字体样式')}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a3i1rq`} style={{ padding: 0 }}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wueqra`} span={7}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@5p4spd`}  
                value={fontFamily}
                options={fontFamilyOpts()}
                onChange={onChange(`${scope}.fontFamily`)}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ciutll`} span={6} offset={1}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@j5o96n`} 
                value={fontSize}
                options={fontSizeOpts()}
                onChange={onChange(`${scope}.fontSize`)}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fa5u4q`} span={4} offset={1}>
              <span 
                onClick={onChange(`${scope}.fontWeight`, this.formatFW)}
                className={classNames('btn-font-weight', { bold })}
              >
                B
              </span>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ta52k3`} span={4} offset={1}>
              <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@ee5pt3`} 
                color={color}
                onChange={onChange(`${scope}.color`)}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@21nnyj`} label={getLabel('511829','对齐方式')}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@3mi855`} 
            detailtype={3}
            value={textAlign}
            options={alignOpts()}
            onChange={onChange(`${scope}.textAlign`)}
          />
        </ThemeItem>
      </div>
    );
  }
}